<template>
  <div class="navbar">
    <div class="navbarL">
      <div @click="TOGGLE_SIDEBAR_AC" class="iconfont icon-hanbaobao hbb " :class="{ 'is-active': this.sidebar.opened }"></div>
      <!-- <div class="navbarLText">首页</div> -->
			<myBread></myBread>
    </div>
    <div class="navbarR">
      <span>欢迎 超级管理员 登录后台系统</span>
			<el-dropdown>
				<span class="el-dropdown-link">
					<img src="@/assets/images/mz_small_icon.png" />
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item>设置</el-dropdown-item>
					<el-dropdown-item><span @click="logout">退出</span></el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
      <div class="el-icon-arrow-down el-icon--right"></div>
    </div>
  </div>
</template>

<script>
import myBread from "./myBreadcrumb.vue"
import { mapActions, mapGetters } from "vuex";

export default {
	name:"navbar",
	methods: {
		// outLogin(){
		// 	this.$cookie.delete("name");
		// 	this.$cookie.delete("token");
		// 	this.$cookie.delete("userid");
		// 	this.$cookie.delete("username");
		// 	console.log("111");
		// 	this.$router.push("/login")
		// },
    ...mapActions(["TOGGLE_SIDEBAR_AC"]),
		logout(){
      this.$store.dispatch("LogoutAC");
			this.$router.push("/login");
		}
	},
	computed: {
    ...mapGetters(["sidebar"]),
  },
	components: {
		myBread
	}
};
</script>

<style lang="scss" scoped>
.navbar {
  height: 50px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  .navbarL {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    margin-left: 15px;
    font-size: 0px;
    .navbarLText {
      line-height: 1;
      display: inline-block;
      font-size: 14px;
      color: #606266;
    }
		.is-active {
      transform: rotate(90deg);
    }
		.hbb{
			height: 16px;
		}
  }
  .navbarR {
    img {
      width: 45px;
      height: 45px;
    }
  }
}
</style>